<template>
  <div class="bar">
    <div class="right">
      <t-button theme="primary" @click="pull.open()">
        <template #icon>
          <t-icon name="tree-list" />
        </template>
        {{ plugin.t('reverse.pull.title') }}
      </t-button>
      <Pull ref="pull" />
      <t-button theme="primary" variant="outline" @click="ticket.open()" style="margin-left: 20px">
        <template #icon>
          <t-icon name="collection" />
        </template>
        {{ plugin.t('reverse_ticket.title') }}
      </t-button>
      <Ticket ref="ticket" />
    </div>
  </div>
  <div class="box bg-box">
    <t-button shape="square" variant="outline" @click="reverseStore.get" style="float: right">
      <template #icon>
        <t-icon name="refresh" />
      </template>
    </t-button>
    <t-form layout="inline" style="margin-bottom: 20px">
      <t-form-item label-width="0">
        <t-select v-model="reverseStore.where.key" style="width: 200px; margin-right: 10px">
          <t-option value="number" :label="plugin.t('reverse.number')" />
          <t-option value="order_number" :label="plugin.t('reverse.order_number')" />
          <t-option value="ticket" :label="plugin.t('reverse.ticket')" />
        </t-select>
        <t-input v-model="reverseStore.where.value" style="width: 200px; margin-right: 10px">
          <template #prefix-icon>
            <t-icon name="search" />
          </template>
        </t-input>
        <Daterange type="time" v-model="reverseStore.where.time" style="width: 250px" />
      </t-form-item>
      <t-form-item label-width="0">
        <t-button theme="default" @click="reverseStore.reset(1)">{{ $t('common.search') }}</t-button>
      </t-form-item>
    </t-form>
    <Table />
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import reverseStore from '../../store/reverse'
  import Table from './table.vue'
  import Pull from './pull.vue'
  import Ticket from './ticket.vue'
  import Daterange from '@/components/daterange.vue';

  const plugin = index.plugin
  const pull = ref()
  const ticket = ref()
</script>